<template>
  <div
    class="edit-range"
    :style="rangeStyle"
    @mousedown="mousedownBoxSelect($event, undefined)"
  >
    <!-- 滤镜预览 -->
    <div
      :style="{
        ...getFilterStyle(editCanvasConfig),
        ...backgroundStyle,
      }"
    >
      <!-- 图表 -->
      <div v-for="(item, index) in componentList" :key="item.id">
        <!-- 分组 -->
        <!-- <edit-group
          v-if="item.isGroup"
          :group-data="(item as CreateComponentGroupType)"
          :group-index="index"
        /> -->
        <!-- 单组件 -->
        <edit-shape-box
          :data-id="item.id"
          :index="index"
          :style="{
            ...useComponentStyle(item.attr, index),
            ...getBlendModeStyle(item.styles),
          }"
          :item="item"
          @click.native="mouseClickHandle($event, item)"
          @mousedown.native="mousedownHandle($event, item)"
          @mouseenter.native="mouseenterHandle($event, item)"
          @mouseleave.native="mouseleaveHandle($event, item)"
        >
          <component
            :is="item.chartConfig.chartKey"
            class="edit-content-chart"
            :class="animationsClass(item.styles.animations)"
            :chart-config="item"
            :theme-setting="editCanvasConfig.chartThemeSetting"
            :theme-color="themeColor"
            :style="{
              ...useSizeStyle(item.attr),
              ...getFilterStyle(item.styles),
              ...getTransformStyle(item.styles),
            }"
          />
        </edit-shape-box>
      </div>
    </div>
    <!-- 拖拽时的辅助线 -->
    <edit-align-line />
    <!-- 框选时的样式框 -->
    <edit-select />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import styleMixin from '../../mixins/style'
import dragMixin from '../../mixins/drag'
import EditSelect from '../EditSelect'
import EditAlignLine from '../EditAlignLine'
import EditShapeBox from '../EditShapeBox'
import { getFilterStyle, getTransformStyle, animationsClass, colorCustomMerge, getBlendModeStyle } from '@/utils'

export default {
  components: { EditSelect, EditAlignLine, EditShapeBox },
  mixins: [styleMixin, dragMixin],
  computed: {
    ...mapGetters(['editCanvas', 'editCanvasConfig']),
    size () {
      return {
        w: this.editCanvasConfig.width,
        h: this.editCanvasConfig.height
      }
    },
    rangeStyle () {
      // 缩放
      const scale = {
        transform: `scale(${this.editCanvas.scale})`
      }
      return { ...this.useSizeStyle(this.size), ...scale }
    },
    // 画布背景
    backgroundStyle () {
      // 设置背景色和图片背景
      const background = this.editCanvasConfig.background
      const backgroundImage = this.editCanvasConfig.backgroundImage
      const selectColor = this.editCanvasConfig.selectColor
      const backgroundColor = background || undefined

      const computedBackground = selectColor
        ? { background: backgroundColor }
        : { background: `url(${backgroundImage}) no-repeat center center / cover !important` }
      return {
        ...computedBackground,
        width: 'inherit',
        height: 'inherit'
      }
    },
    // 配置项
    themeColor () {
      const colorCustomMergeData = colorCustomMerge(this.editCanvasConfig.chartCustomThemeColorInfo)
      return colorCustomMergeData[this.editCanvasConfig.chartThemeColor]
    }
  },
  methods: {
    getFilterStyle,
    getTransformStyle,
    animationsClass,
    getBlendModeStyle
  }
}
</script>

<style lang="scss" scoped>
.edit-range {
  position: relative;
  transform-origin: left top;
  background-size: cover;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.4s;
  border-color: #e3e3e4;
  background-color: #f2f3f5;
  // @include go(edit-range-model) {
  //   z-index: -1;
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  // }
}
</style>